<template>
  <div class="file-table-wrapper">
    <div class="operation-wrapper">
      <div></div>
      <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="handleAddData(1)"
      >新建
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table
        class="file-table"
        :class="['file-type-1', routeName === 'Share' ? 'share' : '']"
        row-key="departmentId"
        fit
        v-loading="loading"
        element-loading-text="数据加载中……"
        tooltip-effect="dark"
        :data="dataList"
        :highlight-current-row="true"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      >
      <el-table-column
          label="部门名称"
          prop="departmentName"
          key="departmentName"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          label="备注"
          prop="remark"
          key="remark"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          label="创建人"
          width="80"
          prop="createUser"
          key="createUser"
          show-overflow-tooltip
          v-if="screenWidth > 768"
      >
        <!--				<template slot-scope="scope">-->
        <!--					<span>{{ scope.row.createUserId }}</span>-->
        <!--				</template>-->
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createTime"
          key="createTime"
          width="160"
          align="center"
          v-if="
					screenWidth > 768
				"
      ></el-table-column>
      <el-table-column
          label="操作"
          key="operation"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="handleAddData(2, scope.row)"
          >新增
          </el-button>
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="handleModifyData(scope.row.children? 1: 2, scope.row)"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="handleDeleteData(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="formType === 1? '新增': '编辑'" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="上级名称" :label-width="formLabelWidth" v-if="departmentType !== 1">
          <el-input v-model="form.parentDepartmentName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上级ID" :label-width="formLabelWidth" v-if="false">
          <el-input v-model="form.parentDepartmentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织名称" :label-width="formLabelWidth">
          <el-input v-model="form.departmentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织ID" :label-width="formLabelWidth" v-if="false">
          <el-input v-model="form.departmentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.remark"
              maxlength="30"
              show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {addDepartment, modifyDepartment} from "@/request/department";

export default {
  name: 'DepartmentTable',
  props: {
    // 文件列表
    dataList: {
      required: true,
      type: Array
    },
    // 文件加载状态
    loading: {
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        parentDepartmentName: '',
        parentDepartmentId: '',
        departmentName: '',
        departmentId: '',
        remark: ''
      },
      selectedRow: {},
      formType: 1, //1:新增  2：编辑
      departmentType: 1, //1:部门 2：组织
      sortedDataList: [] //  排序后的表格数据
    }
  },
  computed: {
    //  selectedColumnList: 判断当前用户设置的左侧栏是否折叠
    ...mapGetters(['selectedColumnList']),
    // 路由名称
    routeName() {
      return this.$route.name
    },
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth
    }
  },
  watch: {
    /**
     * 文件列表变化时清空表格已选行
     */
    dataList() {
      this.clearSelectedTable()
      this.$refs.multipleTable.clearSort()
      this.sortedDataList = this.dataList
    }
  },
  methods: {
    handleAddData(departmentType, row) {
      this.departmentType = departmentType
      this.formType = 1
      this.dialogFormVisible = true
      if (departmentType === 2) {
        this.form.parentDepartmentName = row.departmentName
        this.selectedRow = row
      }
    },
    handleModifyData(departmentType, row) {
      this.selectedRow = row
      this.departmentType = departmentType
      this.formType = 2
      this.dialogFormVisible = true
      this.form = {
        parentDepartmentName: '',
        parentDepartmentId: row.parentDepartmentId,
        departmentName: row.departmentName,
        departmentId: row.departmentId,
        remark: row.remark,
      }
    },
    handleDeleteData( row) {
      this.selectedRow = row
      this.dialogFormVisible = true
    },
    handleSubmit() {
      const param = {
        remark: this.form.remark,
        departmentName: this.form.departmentName,
      }
      if (this.formType === 1) {
        if (this.departmentType === 2) {
          param.parentDepartmentId = this.selectedRow.departmentId
        }
        addDepartment(param).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.dialogFormVisible = false
            this.$emit('getTableData') //  刷新列表
          } else {
            this.$message.error(res.message)
          }
        })
      }else {
        param.departmentId = this.selectedRow.departmentId
        modifyDepartment(param).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('getTableData') //  刷新列表
            this.dialogFormVisible = false
          } else {
            this.$message.error(res.message)
          }
        })
      }

    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';
@import '~_a/styles/mixins.styl';

.file-table-wrapper {
  margin-top: 2px;

  .file-type-0 {
    height: calc(100vh - 206px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 262px) !important;
    }
  }

  .file-type-6 {
    height: calc(100vh - 211px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 263px) !important;
    }
  }

  .file-table.share {
    height: calc(100vh - 109px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 161px) !important;
    }
  }

  .file-table {
    width: 100% !important;
    height: calc(100vh - 203px);

    >>> .el-table__header-wrapper {
      th {
      // background: $tabBackColor; padding: 4px 0; color: $RegularText;
      }

      .el-icon-circle-plus, .el-icon-remove {
        margin-left: 6px;
        cursor: pointer;
        font-size: 16px;

        &:hover {
          color: $Primary;
        }
      }
    }

    >>> .el-table__body-wrapper {
      height: calc(100vh - 255px);
      overflow-y: auto;
    setScrollbar(6 px, transparent, #C0C4CC);

      td {
        padding: 8px 0;

        .file-name {
          .keyword {
            color: $Danger;
          }
        }
      }

      .el-icon-warning {
        font-size: 16px;
        color: $Warning;
      }

      .el-icon-time {
        font-size: 16px;
        color: $Success;
      }
    }
  }
}

.right-menu-list {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid $BorderLighter;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 4px 0;
  color: $RegularText;

  .right-menu-item,
  .unzip-item {
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;

    &:hover {
      background: $PrimaryHover;
      color: $Primary;
    }

    i {
      margin-right: 8px;
    }
  }

  .unzip-menu-item {
    position: relative;

    &:hover {
      .unzip-list {
        display: block;
      }
    }

    .unzip-list {
      position: absolute;
      display: none;

      .unzip-item {
        width: 200px;
      setEllipsis(1)
      }
    }
  }
}

.right-menu-list,
.unzip-list {
  background: #fff;
  border: 1px solid $BorderLighter;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 4px 0;
  color: $RegularText;
}
</style>
